import { useEffect, useState } from 'react';

import { Button, Form, Input, InputNumber, Select } from 'antd';
import { useModel } from '@umijs/max'
import { EquipmentStatus, EquipmentType, VinStatus, editEquipment } from './services'
import type { Equipment } from './services'
import { useRequest } from 'ahooks';
import { enum2options } from '@/utils/enum2options';
import StationSelect from '@/components/StationSelect';
import OrgSelect from '@/components/OrgSelect';

const RoleEditPage: React.FC<RoutePageProps> = (props) => {
  const [editForm] = Form.useForm()
  const { runAsync, loading } = useRequest(editEquipment, {manual: true})
  const { closeCurrentTab } = useModel('global')
  const [equipment, setEquipment] = useState<Equipment>()
  const [editable, setEditable] = useState(false)

  const onFinish = (formValues: any) => {
    runAsync({
      id: formValues.id,
      orgId: formValues.org?.id,
      name: formValues.name,
      type: formValues.type,
      kw: formValues.kw,
      iccid: formValues.iccid,
      status: formValues.status,
      vinStatus: formValues.vinStatus,
      stationId: formValues.station ? formValues.station[0].id : null,
      stationName: formValues.station ? formValues.station[0].name : null,
    })
    .then(() => {
      const event = new CustomEvent('refreshEquipmentList')
      window.dispatchEvent(event)
      closeCurrentTab('/station/stubList')
    })
  }

  useEffect(() => {
    const { id, type } = props.params
    if (id) {
      const _stub = JSON.parse(sessionStorage.stub)
      setEquipment(_stub)
      editForm.setFieldsValue({
        id: _stub.id,
        name: _stub.name,
        type: _stub.type,
        kw: _stub.kw,
        iccid: _stub.iccid,
        org: _stub.orgId ? {
          id: _stub.orgId,
          name: _stub.orgName,
        } : undefined,
        status: _stub.status,
        vinStatus: _stub.vinStatus,
        station: [{
          id: _stub.stationId,
          name: _stub.stationName,
        }]
      })
    } else {
      setEquipment(undefined)
      editForm.setFieldsValue({
        id: undefined,
        name: undefined,
        type: undefined,
        kw: undefined,
        iccid: undefined,
        status: undefined,
        station: undefined,
        vinStatus: VinStatus.支持,
      })
    }
    setEditable(type === 'edit')
  }, [props.params.id, props.params.type])
  
  return (
    <div className='container'>
      <div className="card">
        <Form form={editForm} name='editForm' labelCol={{flex: '120px'}} onFinish={onFinish}>
          <Form.Item name='id' label='设备编号' rules={[
            {required: true, message: '请输入设备编号'},
            {pattern: /^[0-9]*$/, message: '编号只可以是数字'},
          ]}>
            <Input placeholder='请输入' style={{width: 320}} disabled={!editable || !!equipment} />
          </Form.Item>
          <Form.Item name='name' label='设备名称' rules={[{required: true, message: '请输入设备名称'}]}>
            <Input placeholder='请输入' style={{width: 320}} disabled={!editable} />
          </Form.Item>
          <Form.Item name='type' label='设备类型' rules={[{required: true, message: '请选择设备类型'}]}>
            <Select options={enum2options(EquipmentType)} placeholder='请选择' style={{width: 320}} disabled={!editable || !!equipment} />
          </Form.Item>
          <Form.Item name='kw' label='设备功率' rules={[{required: true, message: '请输入设备功率'}]}>
            <InputNumber placeholder='请输入' style={{width: 320}} min={0} disabled={!editable} />
          </Form.Item>
          <Form.Item name='vinStatus' label='支持vin' rules={[{required: true, message: '请选中是否支持vin'}]}>
            <Select placeholder='请选择' style={{width: 320}} options={enum2options(VinStatus)} disabled={!editable} />
          </Form.Item>
          <Form.Item name='iccid' label='iccid' rules={[{required: true, message: '请输入iccid'}]}>
            <Input placeholder='请输入' style={{width: 320}} disabled={!editable} />
          </Form.Item>
          <Form.Item name='status' label='设备状态' rules={[{required: true, message: '请选择设备状态'}]}>
            <Select options={enum2options(EquipmentStatus)} placeholder='请选择' style={{width: 320}} disabled={!editable} />
          </Form.Item>
          <Form.Item name='org' label='经销商'>
            <OrgSelect style={{width: 320}} allowClear />
          </Form.Item>
          <Form.Item name='station' label='场站' rules={[{required: false, message: '请选择场站'}]}>
            <StationSelect style={{width: 320}} disabled={!editable} fromType={1} />
          </Form.Item>
          <Form.Item label=' ' colon={false} hidden={!editable}>
            <Button type='primary' htmlType='submit' loading={loading}>提交</Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
};

export default RoleEditPage;
